Intercepting Routes

(..)hogeのようなdir名にすることで使える

相対path ../のイメージ

code:_

feed

├── @modal

│ └── (..)photo

│ └── id

│ └── page.tsx

├── page.tsx

└── layout.tsx

photo ← ♠

└── id

└── page.tsx

feed/@modal/ないでIntercepting Routesを使っている

(..)photo/とすることで、♠にアクセスできてるということ

そんなに頻用されなさそうなものなのにNext.js本体に入れちゃうんだmrsekut.icon

https://gyazo.com/18ec691e264381220cd02e6cba0df46e

User feedにいる状態で画像をクリックすると、Intercepted route with modalの表示になる

モーダルを開いている感じ

URLは切り替わっている

この状態でリロードするとDefault photo routeの表示になる

@ctnicholasdev: Intercepting routes in @nextjs 13.3 🤯

You can "intercept" a dynamic navigation to a different page, and display something different instead—for example a product preview.

Then, when the page is refreshed or loaded anew, the regular page loads.

https://video.twimg.com/ext_tw_video/1644130857320611840/pu/vid/430x270/KW7MZMr2iaFxmnm1.mp4